<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>结算</title>
    <!-- 引入样式
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css">
    -->
    <!-- 引入组件库
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
    -->
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/shopping.css"/>
    <link rel="stylesheet" href="css/buy.css"/>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script src="js/checkauth.js"></script>


</head>
<body>
<div id="bg"></div>
<div id="addAdrInp">
    <h2>添加收件人</h2>
    <p>收件人：<input type="text" id="name"/></p>
    <p>电话：<input type="text" id="phone"/></p>
    <p>地址：<input type="text" id="adr"/></p>
    <p>
        <button id="buy-subBtn">添加</button>
    </p>
</div>

<!-- 引入头部 -->
<div>
    <iframe src="header.html" scrolling="no" style="height:180px;width: 100%;border: 0px;"></iframe>
</div>
<!--引入头部end-->

<hr style="height: 10px; background-color: #FF4400;"/>

<!--收货地址部分-->
<div class="layui-container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>收货地址</legend>
    </fieldset>
    <div class="layui-row">
        <div class="layui-col-md12">
            <!-- 添加收货地址按钮 -->
            <button id="addAddress" class="layui-btn layui-btn-normal">
                <i class="layui-icon layui-icon-add-1"></i>
                新增收货地址
            </button>
            <br/>
            <!-- 显式收货地址 -->
            <div id="addressList">

            </div>

        </div>
    </div>

</div>
<!--收货地址end-->

<!--商品清单-->
<div class="layui-container" style="top:-30px;">
    <div class="layui-row">
        <div class="layui-col-md12">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                <legend>商品清单</legend>
            </fieldset>

            <table class="layui-table my-shopping-table" lay-skin="line">
                <colgroup>
                    <col width="160">
                    <col width="">
                    <col width="100">
                    <col width="100">
                    <col width="100">
                </colgroup>
                <thead>
                <tr>
                    <th style="font-weight: bold;">
                        图片
                    </th>
                    <th style="font-weight: bold;">
                        商品信息
                    </th>
                    <th style="text-align: center;font-weight: bold;">
                        单价
                    </th>
                    <th style="text-align: center;font-weight: bold;">
                        数量
                    </th>
                    <th style="text-align: center;font-weight: bold;">
                        合计
                    </th>

                </tr>
                </thead>
                <tbody id="goodsList">


                </tbody>
            </table>
        </div>
    </div>
</div>
<!--商品清单end-->

<!--付款部分-->
<div class="layui-container" style="top: -20px;">
    <div class="layui-row  my-shopping-buy">
        <div class="layui-col-md12">
            <div class="my-buyCheck">
            </div>
            <div class="my-buyBtn">
                总价：
                <font style="font-size: 20px;font-weight: bold;color:#FF4400;">￥<span id="totalPrice">9999</span></font>
                <button id="buyBtn" onclick="goToPay()">去付款</button>
            </div>
        </div>

    </div>
</div>
<!--付款部分end-->
<!--引入底部-->
<div class="my-footer">
    <iframe src="footer.html" scrolling="no" style="border: 0px;width: 100%;height: 291px;"></iframe>
</div>
<!--引入底部end-->
</body>
<script>

    layui.use(['layer'], function(){
        var layer = layui.layer;
    });

    //let currentAddressIndex = 0;
    let cart = {

    };
    let addressList = [];
    let currentAddress = {}; //当前的收货地址

    $(function () {
        //地址栏鼠标悬停事件，显示编辑和删除按钮
        $(".my-showAddress").mouseenter(function () {
            $(this).children(".my-address-edit").show();
        });
        $(".my-showAddress").mouseleave(function () {
            $(this).children(".my-address-edit").hide();
        });

        //点击添加新地址事件
        $('#addAddress').on('click', function () {
            layer.open({
                type: 2,
                area: ['700px', '450px'],
                fixed: true, //不固定
                maxmin: false,
                title: '新增收货地址',
                anim: 1,
                /*scrollbar:false,*///禁止滚动
                shadeClose: true,
                content: 'shouhuo.html'
            });
        });
    });

    if (!isLogin()) {
        window.location.href = 'login.html';
    }

    if (window.localStorage.getItem("cart.xiaomimall.com_users" + currentLoginUserId) != null) {
        //把购物打印输出。
        cart = JSON.parse(window.localStorage.getItem("cart.xiaomimall.com_users" + currentLoginUserId));
        //console.log("-----您的购物车对象是-------");
        //console.log(cart);
        $("#goodsList").empty();
        let html = "";
        for (let i = 0; i < cart.goodsList.length; i++) {
            html += '<tr>\n' +
                '\t\t\t\t\t\t\t\t<td>\n' +
                '\t\t\t\t\t\t\t\t\t<a href="">\n' +
                '\t\t\t\t\t\t\t\t\t\t<img src="' + cart.goodsList[i].pic + '" width="80px" />\n' +
                '\t\t\t\t\t\t\t\t\t</a>\n' +
                '\t\t\t\t\t\t\t\t</td>\n' +
                '\t\t\t\t\t\t\t\t<td>\n' +
                '\t\t\t\t\t\t\t\t\t<a href="">\n' +
                '\t\t\t\t\t\t\t\t\t\t' + cart.goodsList[i].name + '\n' +
                '\t\t\t\t\t\t\t\t\t</a>\n' +
                '\t\t\t\t\t\t\t\t</td>\n' +
                '\t\t\t\t\t\t\t\t<td align="center">\n' +
                '\t\t\t\t\t\t\t\t\t<span>￥' + cart.goodsList[i].price + '</span>\n' +
                '\t\t\t\t\t\t\t\t</td>\n' +
                '\t\t\t\t\t\t\t\t<td align="center">\n' +
                '\t\t\t\t\t\t\t\t\t×' + cart.goodsList[i].buyNum + '件\n' +
                '\t\t\t\t\t\t\t\t</td>\n' +
                '\t\t\t\t\t\t\t\t<td align="center">\n' +
                '\t\t\t\t\t\t\t\t\t<span>￥' + cart.goodsList[i].price * cart.goodsList[i].buyNum + '</span>\n' +
                '\t\t\t\t\t\t\t\t</td>\n' +
                '\n' +
                '\t\t\t\t\t\t\t</tr>'
        }

        $("#goodsList").append(html);

        $("#totalPrice").text(cart.totalPrice);

        //发送一个ajax异步请求，获得当前用户的收货地址集合
        $.ajax({
            url: "https://localhost:8443/xiaomimall/address/list?uid=" + currentLoginUserId,
            type: "GET",
            dataType: "text",
            success: function (resp) {
                let result = JSON.parse(resp);
                if (result.code === 200) {
                    console.log('获取商品分类信息成功！');
                    console.log(result.data);
                    addressList = result.data;

                    $("#addressList").empty();
                    let html = "";
                    for (let i = 0; i < addressList.length; i++) {
                        if (i == 0) {
                            html += '\t<div  title="' + i + '" class="my-showAddress sel" >\n';
                            currentAddress = addressList[i];
                        } else {
                            html += '\t<div title="' + i + '" class="my-showAddress" >\n';
                        }
                        html += '\t\t\t\t\t\t\t<p style="border-bottom:1px solid gainsboro;">\n' +
                            '\t\t\t\t\t\t\t\t' + addressList[i].realname + '（收）&nbsp;&nbsp;' + addressList[i].mobile + '\n' +
                            '\t\t\t\t\t\t\t</p>\n' +
                            '\t\t\t\t\t\t\t<p>\n' +
                            '\t\t\t\t\t\t\t\t' + addressList[i].province + '&nbsp;' + addressList[i].city + '&nbsp;' + addressList[i].zone + '\n' +
                            '\t\t\t\t\t\t\t</p>\n' +
                            '\t\t\t\t\t\t\t<p>\n' +
                            '\t\t\t\t\t\t\t\t' + addressList[i].street + '\n' +
                            '\t\t\t\t\t\t\t</p>\n' +
                            '\t\t\t\t\t\t\t<p class="my-address-edit">\n' +
                            '\t\t\t\t\t\t\t\t<a href="">编辑</a>\n' +
                            '\t\t\t\t\t\t\t\t<a href="">删除</a>\n' +
                            '\t\t\t\t\t\t\t</p>\n' +
                            '\t\t\t\t\t\t</div>\n' +
                            '\t\t\t\t\t';
                    }

                    $("#addressList").append(html);
                }

                $(".my-showAddress").click(function () {
                    let index = $(this).prop("title");
                    currentAddress = addressList[index];
                    console.log('change address now....,index is:' + index);
                    $(this).addClass("sel");
                    $(this).siblings().removeClass("sel");
                });
            }
        });

    }

    function goToPay(){
        console.log("当前的购物车是");
        cart.uid = currentLoginUserId;
        cart.address = currentAddress

        console.log(cart);

        $.ajax({
            url: 'https://localhost:8443/xiaomimall/order',
            type: 'POST',
            data: JSON.stringify(cart),
            dataType: 'text',
            success:function(resp){
                let result = JSON.parse(resp);
                if(result.code === 200){
                    //layer.msg(result.msg);
                    let oid = result.data;
                    console.log("返回的订单编号是："+oid);
                    //生成支付的二维码
                    $.ajax({
                        url: "https://localhost:8443/xiaomimall/order/qrcode?oid="+oid,
                        type: "GET",
                        dataType: "text",
                        success: function (resp) {
                            let result = JSON.parse(resp);
                            if(result.code===200) {

                                let qrCodeImgUrl =  result.data;

                                //弹出模态窗口
                                layer.open({
                                    type: 1
                                    ,offset: 't' //水平和垂直方向居中
                                    ,id: '' //防止重复弹出
                                    ,title: '微信扫一扫'
                                    ,content: '<div style="padding: 0px 0px;"><img src="'+qrCodeImgUrl+'"></div>'
                                    ,btn: '支付完成'
                                    ,btnAlign: 'c' //按钮居中
                                    ,shade: 0 //不显示遮罩
                                    ,yes: function(){
                                        layer.closeAll();

                                        setTimeout("javascript:window.location.href='payResult.html'",2000)
                                    }
                                });
                            }
                        }
                    });




                }
            }
        })

    }

</script>
</html>
